<template>
  <div class="md-example-child md-example-child-scroll-view md-example-child-scroll-view-3">
    <md-tabs @change="$_onTabChange" immediate>
      <md-tab-pane class="content" name="scrollView0" label="Block - 1">
        <md-scroll-view ref="scrollView0" name="scrollView0" :scrolling-x="false" :bouncing="false" :auto-reflow="true"
          @end-reached="$_onEndReached(0)">
          <div v-for="i in list0" :key="i" class="scroll-view-list">
            <p class="scroll-view-item">{{i}}</p>
          </div>
          <md-scroll-view-more slot="more" name="scrollView0" finished-text="" :is-finished="isFinished0">
          </md-scroll-view-more>
        </md-scroll-view>
      </md-tab-pane>
      <md-tab-pane class="content" name="scrollView1" label="Block - 2">
        <md-scroll-view ref="scrollView1" name="scrollView1" :scrolling-x="false" :bouncing="false" :auto-reflow="true"
          @end-reached="$_onEndReached(1)">
          <div v-for="i in list1" :key="i" class="scroll-view-list">
            <p class="scroll-view-item">{{i}}</p>
          </div>

          <md-scroll-view-more slot="more" name="scrollView1"
            finished-text="<md-icon name='location' size='sm'></md-icon>"
            loading-text="<md-icon name='location' size='sm'></md-icon>" :is-finished="isFinished1">
          </md-scroll-view-more>
        </md-scroll-view>
      </md-tab-pane>
    </md-tabs>
  </div>
</template>

<script>
  import {
    Tabs,
    TabPane,
    ScrollView,
    ScrollViewMore,
    Icon
  } from 'mand-mobile'

  export default {
    name: 'scroll-view-demo-2',
    /* DELETE */
    title: '加载更多',
    titleEnUS: 'Load More',
    message: '请在移动设备中扫码预览',
    messageEnUS: 'Please scan QR code and preview on mobile device',
    /* DELETE */
    components: {
      [Tabs.name]: Tabs,
      [TabPane.name]: TabPane,
      [ScrollView.name]: ScrollView,
      [ScrollViewMore.name]: ScrollViewMore,
      [Icon.name]: Icon,
    },
    data() {
      return {
        list0: 10,
        list1: 10,
        isFinished0: false,
        isFinished1: false,
      }
    },
    methods: {
      $_onEndReached(i) {
        let _this = this
        if (this['isFinished' + i]) {
          return
        }
        // async data
        setTimeout(() => {
          if (_this['list' + i] >= 20) {
            _this['isFinished' + i] = true
          }
          _this['list' + i] += 5
          _this.$refs['scrollView' + i].finishLoadMore()
        }, 1000)
      },
      $_onTabChange(tab) {
        console.log(tab.name)
        this.$refs[tab.name].init()
      },
    },
  }
</script>

<style lang="less" scoped>
  .md-example-child-scroll-view-3 {
    height: 800px;
    background: #FFF;
  }

  /deep/.md-tab-pane {
    height: 800px;
  }

  .scroll-view-item {
    padding: 30px 0;
    text-align: center;
    font-size: 32px;
    font-family: DINAlternate-Bold;
    border-bottom: .5px solid #efefef;
  }
</style>